<template>
	<view class="page">
		<view class="status_box">
			<view class="status" :class="{active:state == 4}" @click="changeState(4)">待接单</view>
			<view class="status" :class="{active:state == 1}" @click="changeState(1)">已接单</view>
			<view class="status" :class="{active:state == 2}" @click="changeState(2)">已付款</view>
			<view class="status" :class="{active:state == 3}" @click="changeState(3)">已完成</view>
		</view>
		<view class="list">
			<view class="item" m v-for="item in list">
				<view class="name" @click="toDetail(item)">{{item.name}} 
				<template v-if="item.state != 3">
					<span class="goLabel" v-if="item.arriveswitch == 1">已到达</span>
					<span class="goLabel" v-else-if="item.goswitch == 1">已出发</span>
				</template>
				</view>
				<view class="text" @click="toDetail(item)">预约时间：<text class="fr">{{item.appointmenttime}}</text></view>
				<view class="text" @click="toDetail(item)">物品重量：<text class="fr">{{kgList[item.kg]}}</text></view>
				<view class="bottom">
					<template v-if="item.state == 1">
						<text @click="hadGo(item)" v-if="item.goswitch == 0">我已出发</text>
						<text @click="hadArrive(item)" v-if="item.goswitch && item.arriveswitch == 0">我已到达</text>
						<text @click="toPrice(item)">付款</text>
						<text @click="toMap(item)">一键导航</text>
					</template>
					<template v-else-if="item.state == 4">
						<text @click="sureOrder(item)">接单</text>
						<text @click="refuseOrder(item)">拒单</text>
					</template>
					<template v-else>
						<!-- <text>修改</text>
						<text>取消</text> -->
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: 1,
				page: 1,
				pagesize: 10000,
				list: [],
				kgList: ["0~10kg", "10~50kg", "50~100kg", "100kg以上"]
			}
		},
		methods: {
			changeState(state) {
				this.state = state;
				this.getList()
			},
			getList() {
				this.$get('recovery/releaselist', {
					state: this.state,
					page: this.page,
					pagesize: this.pagesize,
				}, (res) => {
					console.log(res)
					this.list = res.list
				})
			},
			toPrice(item) {
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						this.$get('recovery/arrive', {
							id: item.id,
							lng: res.longitude,
							lat: res.latitude,
						}, (res) => {
							console.log(res)
							if (res.is_arrive == 1) {
								uni.navigateTo({
									url: "/pages/order/price?id=" + item.id
								})
							}
						})

					}
				});

			},
			toMap(item) {
				uni.openLocation({
					latitude: Number(item.address_info.lat), //要去的纬度-地址       
					longitude: Number(item.address_info.lng), //要去的经度-地址
					name: item.address, //地址名称
					address: item.detailed_address, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			toDetail(item) {
				uni.navigateTo({
					url: "/pages/order/info?id=" + item.id
				})
			},
			sureOrder(item) {
				uni.showModal({
					title: '提示',
					content: '确认接受该订单吗？',
					success: (res) => {
						if (res.confirm) {
							uni.getLocation({
								type: 'wgs84',
								success: (res) => {
									this.$get('recovery/getorder', {
										id: item.id,
										release_lng: res.longitude,
										release_lat: res.latitude,
									}, (res) => {
										uni.showToast({
											title: "接单成功！",
										})
										this.changeState(1);
										uni.requestSubscribeMessage({
											tmplIds:["_4gIXjgj_MWFRUOvUYvA5CXaVUx0tZbD_Mb1NfaeUoI"],
											success:(res)=>{
												console.log(res)
											},
											fail:(res)=>{
												console.log(res)
											},
										})
									})

								}
							});


						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			refuseOrder(item) {
				uni.showModal({
					title: '提示',
					content: '确认拒接该订单吗？',
					success: (res) => {
						if (res.confirm) {
							this.$get('recovery/refuseorder', {
								id: item.id,
								reason: "",
							}, (res) => {
								uni.showToast({
									title: "拒单成功！",
								})
								this.getList()
								uni.requestSubscribeMessage({
									tmplIds:["_4gIXjgj_MWFRUOvUYvA5CXaVUx0tZbD_Mb1NfaeUoI"],
									success:(res)=>{
										console.log(res)
									},
									fail:(res)=>{
										console.log(res)
									},
								})
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			hadGo(item) {
				uni.showModal({
					title: '提示',
					content: '确认通知客户我已出发吗？',
					success: (res) => {
						if (res.confirm) {
							uni.getLocation({
								type: 'wgs84',
								success: (res) => {
									console.log('当前位置的经度：' + res.longitude);
									console.log('当前位置的纬度：' + res.latitude);
									this.$get('recovery/go', {
										id: item.id,
										lng: res.longitude,
										lat: res.latitude,
									}, (res) => {
										uni.showToast({
											title: "已通知",
										})
										this.getList()
									})

								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			hadArrive(item) {
				uni.showModal({
					title: '提示',
					content: '确认通知客户我已到达吗？',
					success: (res) => {
						if (res.confirm) {
							uni.getLocation({
								type: 'wgs84',
								success: (res) => {
									console.log('当前位置的经度：' + res.longitude);
									console.log('当前位置的纬度：' + res.latitude);
									this.$get('recovery/arrive', {
										id: item.id,
										lng: res.longitude,
										lat: res.latitude,
									}, (res) => {
										uni.showToast({
											title: "已通知",
										})
										this.getList()
									})
			
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			
			},
		},
		onLoad(options) {
			this.state = options.state || 1;
		},
		onShow() {
			this.getList()
		}
	}
</script>

<style>
	.page {
		padding-top: 100rpx;
	}

	.status_box {
		display: flex;
		background-color: #FFFFFF;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.status_box .status {
		flex: 1;
		margin: 0 30rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
	}

	.status_box .status.active {
		color: #22BF8A;
		border-bottom: 1px solid #22BF8A;
	}

	.list {
		padding: 20rpx 30rpx;
	}

	.list .item {
		background-color: #FFFFFF;
		padding: 30rpx 0;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}

	.list .item .name {
		padding: 0 40rpx;
		font-size: 36rpx;
		margin-bottom: 30rpx;
		font-weight: bold;
	}
	
	.list .item .goLabel{
		font-size: 24rpx;
		float: right;
		font-weight: normal;
		color: #22BF8A;
		line-height: 50rpx;
	}

	.list .item .text {
		line-height: 60rpx;
		font-size: 26rpx;
		padding: 0 40rpx;
	}

	.list .item .bottom {
		text-align: right;
		border-top: 1px solid #E5E5E5;
		margin-top: 20rpx;
		padding-top: 20rpx;

	}

	.list .item .bottom text {
		margin-right: 20rpx;
		padding: 0 34rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		border: 1px solid #E5E5E5;
		border-radius: 4px;
		display: inline-block;
	}
</style>
